<template>
  <div class="hello">
    <h1>
      当前的计数：<span>{{ count }}</span>
    </h1>
    <h1>加工后的计数：{{ $store.getters.changeCount }}</h1>
    <button @click="add">累加</button>
    <button @click="reduce">累减</button>
    <h1>
      当前课程的个数：<span>{{ length }}</span>
    </h1>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.state.count;
    },
    length() {
      return this.$store.state.list.length;
    },
  },
  methods: {
    add() {
      //异步操作
      // this.$store.dispatch("add", 1);
      this.$store.commit("ADD", 1);
    },
    reduce() {
      this.$store.dispatch("reduce", 1);
    },
  },
};
</script>

<style scoped>
.jianshao {
  margin-left: 10px;
}
span {
  color: red;
}
</style>
